<template>
    <div class="box">
        <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>

        <el-dialog v-model="dialogVisible" title="新增图书" style="width: 450px">
            <el-form :model="form">

                <el-form-item label="书名">
                    <el-input v-model="form.name" placeholder="请输入书名" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author" placeholder="请输入作者" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-date-picker v-model="form.year_publication" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" :rows="2" v-model="form.synopsis" placeholder="请输入"
                        style="width: 220px"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog v-model="EditDialogVisible" title="编辑" style="width: 450px">
            <el-form :model="form">

                <el-form-item label="书名">
                    <el-input v-model="form.name" placeholder="请输入书名" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="form.author" placeholder="请输入作者" style="width: 220px"></el-input>
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-date-picker v-model="form.year_publication" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" :rows="2" v-model="form.synopsis" placeholder="请输入"
                        style="width: 220px"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="EditDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <div class="contentView">
            <JsTable :toolBar="toolBar" :total="state.totalCount" :dataSource="state.dataSource"
                :columns="state.columns" :refresh="state.refresh" @search=search>
            </JsTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getBookList, deleteBook, addBook, editBook } from '@/api/login'
import { ref } from 'vue';
import { ElMessage, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
const dialogVisible = ref(false);
const EditDialogVisible = ref(false);
const form = ref({
    name: '',
    author: '',
    year_publication: "",
    synopsis: "",
    id: ""
});

const confirmAdd = () => {
    addBook(form.value).then(() => {
        state.value.refresh = 1
        console.log('提交表单', form.value);
        ElMessage.success('图书添加成功！');
        dialogVisible.value = false; // 关闭弹窗
    })
};

const handleAdd = () => {
    dialogVisible.value = true;
};


const handleEdit = (row: any) => {
    form.value = row
    EditDialogVisible.value = true;
};

const confirmEdit = () => {
    console.log("form的值", form.value)
    let modifiedForm = {
        // ...form.value,
        id: form.value.id,
        author: form.value.author,
        name: form.value.name,
        synopsis: form.value.synopsis,
        year_publication: form.value.year_publication
    }
    editBook(modifiedForm).then(() => {
        state.value.refresh = 1
        console.log('提交表单', form.value);
        ElMessage.success('图书修改成功！');
        EditDialogVisible.value = false; // 关闭弹窗
        form.value = {
            name: '',
            author: '',
            year_publication: "",
            synopsis: "",
        }
    })

};

const search = (params: any) => {

    let config = {
        pageNum: params.page,
        pageSize: params.pageSize,
    }

    getBookList(config).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
        state.value.refresh = 0
    })
}

onMounted(() => {
    state.value.refresh = 1
})

const deletebook = (row: any) => {
    deleteBook(row.id).then(() => {
        state.value.refresh = 1
    })
}
const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '图书管理',
    columns: {
        props: [

            {
                name: "书名",
                key: "name",
            },
            {
                name: "作者",
                key: "author",
            },
            {
                name: "出版年份",
                key: "year_publication",
            },
            {
                name: "简介",
                key: "synopsis",
            },

        ],
        options: {
            width: 200,
            btns: [
                {
                    label: '编辑',
                    key: 'edit',
                    type: 'warning',
                    event: handleEdit
                },
                {
                    label: '下架',
                    key: 'delete',
                    type: 'danger',
                    event: deletebook
                },

            ],
        },
    },
    dataSource: [
        //     {
        //     username: '1111',
        //     type: '1111',
        //     createTime: '1111',
        //     updateTime: '1111',
        // }
    ],
    tableEvent: {},
} as any)

const toolBar = ref<any>({
    form: {
        username: '',
    },
    // input: [
    //     {
    //         label: '输入框',
    //         key: 'username',
    //         placeholder: '请输入',
    //         el: 'input',
    //     },
    // ],
    btns: [
        // {
        //     label: '查询',
        //     icon: 'Search',
        // },
        {
            label: '新增',
            event: handleAdd,
            icon: "Plus",
            // event: () => {
            //     Object.keys(toolBar.value.form).forEach((key: string) => {
            //         toolBar.value.form[key] = ''
            //     })
            // },
        },
    ],
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
    display: none;
    width: 10px;
}

.box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .contentView {
        background-color: white;
        border-radius: 5px;
        height: calc(100vh - 144px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>